<template>
	<view>
		<image v-if="curL==-1" :src="imgUrl" mode="aspectFill" class="cover"></image>
		<!-- <video v-else class="video" :src="videoSrc" controls></video> -->
		<Player :src="videoSrc" v-if="isPlay"></Player>
		<view class="title">{{title}}</view>
		<view style="margin-left: 20upx;">{{desc}}</view>
		<!-- <view>视频源：</view> -->
		<view v-for="(playOrigin, l) in play_lists" class="origin-container">
			<view style="color: #ff007f;" class="playOrigin">
				{{playOrigin.name}}
			</view>
			<view class="item-container">
				<view v-for="(item, r) in playOrigin.video_list"
					:class="['playItem', (l==curL&&r==curR? 'choosed' : '')]" @click="choose(l, r)">
					{{item.name}}
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import Player from '../../components/xiao-video-component/xiao-video-component.vue';
	
	
	function dateFormat(fmt, date) {
		let ret;
		const opt = {
			"Y+": date.getFullYear().toString(), // 年
			"m+": (date.getMonth() + 1).toString(), // 月
			"d+": date.getDate().toString(), // 日
			"H+": date.getHours().toString(), // 时
			"M+": date.getMinutes().toString(), // 分
			"S+": date.getSeconds().toString() // 秒
			// 有其他格式化字符需求可以继续添加，必须转化成字符串
		};
		for (let k in opt) {
			ret = new RegExp("(" + k + ")").exec(fmt);
			if (ret) {
				fmt = fmt.replace(ret[1], (ret[1].length == 1) ? (opt[k]) : (opt[k].padStart(ret[1].length, "0")))
			};
		};
		return fmt;
	}

	export default {
		components: {
			Player
		},
		data() {
			return {
				isPlay: false,
				curL: -1,
				curR: -1,
				imgUrl: null,
				play_lists: [],
				title: "",
				url: null,
				desc:""
			}
		},
		methods: {
			choose(l, r) {	
				this.isPlay = true
				this.curL = l;
				this.curR = r;
				let {
					imgUrl,
					title,
					url
				} = this
				this.pushHistory({
					imgUrl,
					title,
					url,
					time: dateFormat("YYYY-mm-dd HH:MM" ,new Date())
				})
			},
			async getData(url) {
				uni.showLoading({
					 title: '加载中'
				 });
				 try{
				 	let data = await this.$http.get(url)
				 	data = data.data
				 	console.log(data)
				 	this.imgUrl = data.cover_url
				 	this.play_lists = data.play_lists
				 	this.desc = data.description
				 	this.title = data.title
				 }catch(e){
				 	this.title = "资源已废弃，请换源"
				 }
				
				uni.hideLoading();
			},
			pushHistory(value) {
				uni.getStorage({
					key: "history",
					success(oldHistory) {
						oldHistory = oldHistory.data
						console.log(oldHistory)
						// todo: 删掉之前该项的历史记录

						for (let i = 0; i < oldHistory.length; i++) {
							console.log(i, oldHistory.length)
							console.log(i, oldHistory[i], value)
							if (oldHistory[i].url === value.url) oldHistory.splice(i, 1);
						}

						oldHistory.push(value)
						uni.setStorage({
							key: "history",
							data: oldHistory
						})
					},
				})

			}
		},
		computed: {
			videoSrc() {
				if (this.curL == -1) return "";
				return this.play_lists[this.curL].video_list[this.curR].info + "/url"
			}
		},
		onLoad(options) {
			
			this.url = options.url
			console.log(options.url)
			this.getData(options.url)
		}
	}
</script>

<style>
	.cover {
		width: 100%;
		height: 500rpx;
		padding: 10rpx;
	}

	.video {
		width: 100%;
		height: 500rpx;
		padding: 10rpx;
	}

	.title {
		font-size: 1.5em;
		font-weight: bold;
		color: #303133;
		margin: 60rpx 32rpx;
	}

	.origin-container {
		width: 90%;
		margin: 0 auto;
	}

	.playOrigin {
		border-bottom: 1rpx #323233 solid;
		margin: 40rpx 0;
	}

	.item-container {
		display: grid;
		grid-template-columns: 1fr 1fr 1fr;
	}

	.playItem {
		padding: 8rpx 12rpx;
		border: 1rpx #333333 solid;
		border-radius: 6rpx;
		margin: 10rpx;
		text-align: center;
	}

	.playItem.choosed {
		background-color: #303133;
		color: #FFF;
	}
</style>
